/**
 * This example demonstrates the treelist widget.
 */
Ext.define('Admin.view.main.MainWrapper', {
    extend: 'Ext.panel.Panel',
    xtype: 'main-main-wrapper',
    width: Ext.Element.getViewportWidth(),
    height: Ext.Element.getViewportHeight(),
    title: '通用挂机助手',
    // controller: 'main',

    iconCls: 'fa fa-gears',
    layout: 'border',

    // viewModel: {
    //     type: 'main'
    // },

    header: {
        items: [{
            xtype: 'button',
            text: 'Options',
            menu: [{
                text: 'Expander Only',
                checked: true,
                // handler: 'onToggleConfig',
                // config: 'expanderOnly'
            }, {
                text: 'Single Expand',
                checked: false,
                // handler: 'onToggleConfig',
                // config: 'singleExpand'
            }]
        },{
            xtype: 'button',
            text: 'Nav',
            enableToggle: true,
            reference: 'navBtn',
            // toggleHandler: 'onToggleNav'
        },{
            xtype: 'button',
            text: 'Micro',
            enableToggle: true,
            toggleHandler: 'onToggleMicro'
        }]
    },

    items: [{
        region: 'west',
        bind : {
            width: '{westBaseWidth}',
            minWidth: '{westMinWidth}',
            maxWidth: '{westMaxWidth}',
        },
        split: true,
        reference: 'treelistContainer',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        border: false,
        scrollable: 'y',
        items: [{
                xtype: 'treelist',
                reference: 'navigationTreeList',
                bind: '{navItems}',
                listeners: {
                    selectionchange: 'onNavigationTreeSelectionChange'
                }
            }]
        },
        {
            region: 'center',
            bodyPadding: 10,
            // reference: 'centerContainer',
            items: [
                {
                    xtype: 'container',
                    // xtype: 'panel',
                    // xtype: 'component',
                    // xtype: 'dept-view',
                    reference: 'centerContainer',
                    // bind: '{navItems}',
                    // flex: 1,
                    // cls: 'sencha-dash-right-main-container',
                    // itemId: 'contentPanel',
                    layout: {
                        type: 'card',
                        anchor: '100%'
                    }
                }
            /*     {
                    xtype: 'window',
                    height: 400,
                    width:  400,
                    // xtype: 'panel',
                    // xtype: 'component',
                    // xtype: 'dept-view',
                    reference: 'centerContainer',
                    // bind: '{navItems}',
                    // flex: 1,
                    // cls: 'sencha-dash-right-main-container',
                    // itemId: 'contentPanel',
                    // layout: {
                    //     type: 'card',
                    //     anchor: '100%'
                    // }
                }  */
            ]
        }
    ],
    listeners: {
        // 左侧栏宽度,自适应浏览器窗口大小的1/5,右侧栏就是剩下的4/5
        resize : function (own, width, height, oldWidth, oldHeight, eOpts) {
            // let west = own.items.items[0]
            let west = own.getReferences().treelistContainer
            let right = own.getReferences().centerContainer
            let pvm = this.lookupViewModel(true)
            let baseScale = pvm.get('westBaseScale')
            // let baseScale1 = this.getViewModel()
            west.setWidth(width / baseScale)
            right.setWidth(width - (width / baseScale) - 10)
        }
    },
});